<template>
    <div class="uc-main">
      <el-card>
        <h2>个人资料</h2>
        <div class="profile-info">
          <el-row :gutter="20">
            <el-col :span="12" v-for="(info, index) in userFields" :key="info.key">
              <el-form-item :label="info.label">
                <el-input
                  v-if="info.editable"
                  v-model="userInfo[info.key]"
                  :placeholder="info.placeholder"
                  size="small"
                />
                <el-input
                  v-else
                  v-model="userInfo[info.key]"
                  :placeholder="info.placeholder"
                  size="small"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-button type="primary" @click="updateUserInfo" style="margin-top: 20px;">提交修改</el-button>
      </el-card>
  
      <el-card v-if="passwords" style="margin-top: 20px;">
        <h2>密码安全</h2>
        <div class="password-info">
          <el-form-item label="原始密码">
            <el-input type="password" v-model="passwords.oldPassword" size="small" />
          </el-form-item>
          <el-form-item label="新密码">
            <el-input type="password" v-model="passwords.newPassword" size="small" />
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input type="password" v-model="passwords.confirmPassword" size="small" />
          </el-form-item>
          <el-button type="primary" @click="updatePassword" style="margin-top: 20px;">确认修改</el-button>
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue';
  
  const props = defineProps({
    userInfo: {
      type: Object,
      required: true,
    },
    passwords: {
      type: Object,
      required: false,
    },
  });
  
  // 用户信息表单字段
  const userFields = [
    { label: '昵称', key: 'nickname', editable: true, placeholder: '请输入昵称' },
    { label: '性别', key: 'sex', editable: true, placeholder: '请输入性别' },
    { label: '身份证号', key: 'idCard', editable: true, placeholder: '请输入身份证号' },
    { label: '用户名', key: 'username', editable: false, placeholder: '不可编辑' },
    { label: '角色', key: 'role', editable: false, placeholder: '不可编辑' },
    { label: '地址', key: 'useraddress', editable: true, placeholder: '请输入地址' },
    { label: '手机号码', key: 'userphone', editable: true, placeholder: '请输入手机号码' },
    { label: '用户照片', key: 'userphoto', editable: true, placeholder: '请输入用户照片链接' },
  ];
  
  // 更新用户信息函数（这里需要实现实际的API调用逻辑）
  const updateUserInfo = () => {
    console.log('提交的用户信息:', props.userInfo);
  };
  
  // 更新密码函数（这里需要实现实际的API调用逻辑）
  const updatePassword = () => {
    if (props.passwords.newPassword !== props.passwords.confirmPassword) {
      alert("新密码和确认密码不匹配！");
      return;
    }
    console.log('提交的密码信息:', props.passwords);
  };
  </script>
  
  <style scoped>
  .uc-main {
    padding: 20px;
  }
  
  .profile-info,
  .password-info {
    margin-bottom: 20px;
  }
  
  .el-form-item {
    margin-bottom: 0; /* 取消字段间的下边距，以增强行对齐效果 */
  }
  </style>
  